leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import { ActionButton } from "components/ActionBar/ActionButton";
3import { Sidebar } from "components/ActionBar/Sidebar";
4import { useEntitySetContext } from "components/EntitySetProvider";
5import { HelpPopover } from "components/HelpPopover";
6import { HomeButton } from "components/HomeButton";
7import { Media } from "components/Media";
8import { useLeafletPublicationData } from "components/PageSWRDataProvider";
9import { ShareOptions } from "components/ShareOptions";
10import { ThemePopover } from "components/ThemeManager/ThemeSetter";
11import { Watermark } from "components/Watermark";
12import { useUIState } from "src/useUIState";
13import { BackToPubButton, PublishButton } from "./Actions";
14import { useIdentityData } from "components/IdentityProvider";
15
16export function LeafletSidebar(props: { leaflet_id: string }) {
17 let entity_set = useEntitySetContext();
18 let { data: pub } = useLeafletPublicationData();
19 let { identity } = useIdentityData();
20
21 return (
22 <div
23 className="spacer flex justify-end items-start"
24 style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }}
25 onClick={(e) => {
26 e.currentTarget === e.target && blurPage();
27 }}
28 >
29 <Media
30 mobile={false}
31 className="sidebarContainer relative flex flex-col justify-end h-full w-16"
32 >
33 {entity_set.permissions.write && (
34 <Sidebar>
35 {pub?.publications &&
36 identity?.atp_did &&
37 pub.publications.identity_did === identity.atp_did ? (
38 <>
39 <PublishButton />
40 <ShareOptions />
41 <ThemePopover entityID={props.leaflet_id} />
42 <HelpPopover />
43 <hr className="text-border" />
44 <BackToPubButton publication={pub.publications} />
45 </>
46 ) : (
47 <>
48 <ShareOptions />
49 <ThemePopover entityID={props.leaflet_id} />
50 <HelpPopover />
51 <hr className="text-border" />
52 <HomeButton />
53 </>
54 )}
55 </Sidebar>
56 )}
57 <div className="h-full flex items-end">
58 <Watermark />
59 </div>
60 </Media>
61 </div>
62 );
63}
64
65const blurPage = () => {
66 useUIState.setState(() => ({
67 focusedEntity: null,
68 selectedBlocks: [],
69 }));
70};